<#include "../macro/seller.html" />
<@layout>
	<!-- content start -->
	<div class="admin-content">
		<div class="am-cf am-padding">
			<div class="am-fl am-cf">
				<strong class="am-text-primary am-text-lg">模板详情</strong>
			</div>
		</div>
		
		<div id="sizetable" style="height: auto">
			<#if map??>
  			<#list map.keySet() as key>
  			<#assign item = map.get(key)> 
  			<div style="padding-left: 20px; width: 90%;">
				<div >
					 <input type="text" id="name" class="title"   class="am-form-field"   value="<#list titList as ti><#if ti_index == key_index>${ti}</#if></#list>" placeholder="模板名称">
				</div>
				<div style="float: left;margin-top: 5px;">

					<table class="sizeclass" id="table${key_index}" >
						<tr>
							<th>尺码</th>
    	 					<#list item as itemValue>
							<td><input type="text" class="class${key_index}"
								style="width: 40px; border-style: none" value= "${itemValue.french_size}"/></td>
    		 				</#list>
						</tr>
						<tr>
							<th>长度(mm)</th>
							<#list item as itemValue>
							<td><input type="text" class="classvalue${key_index}"
								style="width: 40px; border-style: none" value= "${itemValue.size}" /></td>
							</#list>
						</tr>
					</table>
				</div>
				<div 
					style="width: 30px;; float: left; margin-left: -20px; margin-top: 14px;">
					<img alt="" src="../image/jiahao.jpg"
						style="width: 20px; height: 20px;" onclick="addOneSize(${key_index})">
				</div>
			</div>
    	 	<div style="clear: both;height: 20px;"></div>
   			</#list>
			<#else>
				<div style="padding-left: 20px; width: 90%;">
				<div >
					 <input type="text" id="name" class="title"   class="am-form-field"   value="${title!}" placeholder="模板名称">
				</div>
				<div style="float: left;margin-top: 5px;">

					<table class="sizeclass" id="table0" >
						<tr>
							<th>尺码</th>
							<td><input type="text" class="class0"
								style="width: 40px; border-style: none" /></td>
							<td><input type="text" class="class0"
								style="width: 40px; border-style: none" /></td>
							<td><input type="text" class="class0"
								style="width: 40px; border-style: none" /></td>
							<td><input type="text" class="class0"
								style="width: 40px; border-style: none" /></td>
							<td><input type="text" class="class0"
								style="width: 40px; border-style: none" /></td>
							<td><input type="text" class="class0"
								style="width: 40px; border-style: none" /></td>
							<td><input type="text" class="class0"
								style="width: 40px; border-style: none" /></td>
							<td><input type="text" class="class0"
								style="width: 40px; border-style: none" /></td>
						</tr>
						<tr>
							<th>长度(mm)</th>
							<td><input type="text" class="classvalue0"
								style="width: 40px; border-style: none" /></td>
							<td><input type="text" class="classvalue0"
								style="width: 40px; border-style: none" /></td>
							<td><input type="text" class="classvalue0"
								style="width: 40px; border-style: none" /></td>
							<td><input type="text" class="classvalue0"
								style="width: 40px; border-style: none" /></td>
							<td><input type="text" class="classvalue0"
								style="width: 40px; border-style: none" /></td>
							<td><input type="text" class="classvalue0"
								style="width: 40px; border-style: none" /></td>
							<td><input type="text" class="classvalue0"
								style="width: 40px; border-style: none" /></td>
							<td><input type="text" class="classvalue0"
								style="width: 40px; border-style: none" /></td>
						</tr>
					</table>
				</div>
				<div
					style="width: 30px;; float: left; margin-left: 5px; margin-top: 14px;">
					<img alt="" src="../image/jiahao.jpg"
						style="width: 20px; height: 20px;" onclick="addOneSize(0)">
				</div>
			</div>
				<div style="clear: both;height: 20px;"></div>
			</#if>
		</div>
		<p style="margin-left:20px;margin-top: 50px;">
			<button type="button" class="am-btn am-btn-secondary"
				onclick="addSize()">添加模板</button>&nbsp;<button type="button" class="am-btn am-btn-secondary"
				onclick="submit()">提交</button>
		</p>
	</div>

	<!-- content end -->
	<style type="text/css">
.sizeclass {
	text-align: center;
	width: 80%;
}

.sizeclass td {
	border: solid 1px;
	width: 40px;
	border-style: none"
}
.title{
	width:200px;
}
.sizeclass th {
	text-align: left;
	border: solid 1px;
	width: 80px;
}
</style>
	<script>
	 var tableSize=0;
	$(function(){
		if(${titSize}!=0){
			tableSize=${titSize}-1;
		}
	});
	   
		function addOneSize(i) {
			var tableid="#table"+i;
				$(tableid).each(function(index,ele){
					$(this).find("tr").each(function(index){
						if(index==0){
							$(this).append('<td><input type="text" class="class'+i+'"  style="width: 40px; border-style: none" /></td>');
						}else{
							$(this).append('<td><input type="text" class="classvalue'+i+'" style="width: 40px; border-style: none" /></td>');
						}
					});
					
				});
		}
		function addSize() {
			tableSize+=1;
			var table=$("#sizetable");
			table.append('<div style="padding-left: 20px; width: 90%;"><div><input type="text" class="title" class="am-form-field"    placeholder="模板名称"></div><div style="float: left;margin-top:5px;"><table id="table'+tableSize+'" class="sizeclass" ><tr><th>尺码</th><td><input type="text" class="class'+tableSize+'" style="width: 40px; border-style: none" /></td><td><input type="text" class="class'+tableSize+'"  style="width: 40px; border-style: none" /></td><td><input type="text" class="class'+tableSize+'"  style="width: 40px; border-style: none" /></td><td><input type="text" class="class'+tableSize+'"  style="width: 40px; border-style: none" /></td><td><input type="text" class="class'+tableSize+'"  style="width: 40px; border-style: none" /></td><td><input type="text"  class="class'+tableSize+'" style="width: 40px; border-style: none" /></td><td><input type="text"  class="class'+tableSize+'" style="width: 40px; border-style: none" /></td><td><input type="text" class="class'+tableSize+'"  style="width: 40px; border-style: none" /></td></tr><tr><th>长度(mm)</th><td><input type="text" class="classvalue'+tableSize+'"  style="width: 40px; border-style: none" /></td><td><input type="text" class="classvalue'+tableSize+'"  style="width: 40px; border-style: none" /></td><td><input type="text" class="classvalue'+tableSize+'"  style="width: 40px; border-style: none" /></td><td><input type="text" class="classvalue'+tableSize+'"  style="width: 40px; border-style: none" /></td><td><input type="text" class="classvalue'+tableSize+'"  style="width: 40px; border-style: none" /></td><td><input type="text" class="classvalue'+tableSize+'"  style="width: 40px; border-style: none" /></td><td><input type="text" class="classvalue'+tableSize+'"  style="width: 40px; border-style: none" /></td><td><input type="text" class="classvalue'+tableSize+'"  style="width: 40px; border-style: none" /></td></tr></table></div><div style="width: 30px;; float: left; margin-left: -20px; margin-top: 14px;"><img alt="" src="../image/jiahao.jpg" style="width: 20px; height: 20px;" onclick="addOneSize('+tableSize+')"></div></div><div style="clear: both;height: 20px;"></div>');
			
		}
		
		function submit(){
			var french='';
			var size='';
			var title='';
			for(var i=0;i<=tableSize;i++){
				$(".class"+i).each(function(index){
					french+=$(this).val()+",";
				});
				$(".classvalue"+i).each(function(index){
					size+=$(this).val()+",";
				});
				french+=';';
				size+=';';
			}
			$(".title").each(function(index){
				title+=$(this).val()+";";
			});
			$.post("../selleradmin/insertTemplet",{french:french,size:size,title:title}, function(data){
					alert(data);
			});
			
		}
		
	</script>
</@layout>